<div class="breadCrumb clearfix">    
    <ul id="breadcrumbs">
        <li><a href="index-2.html">Home</a></li>
        <li><a href="#">Media</a></li>
        <li>Images gallery</li>
    </ul>        
</div>    

<div class="content">                       
    
    <div class="row-fluid">
        
        <div class="widget">                    
            <div class="head dark">
                <div class="icon"><span class="icos-star3"></span></div>
                <h2>Gallery with hover(2 types)</h2>                    
            </div> 
            <div class="Gallery clearfix">

                <div class="view ftype">
                    <img src="/images/examples/photo/example_1.jpg"/>
                    <div class="mask"></div>
                    <div class="content">
                        <h2>Lorem ipsum dolor</h2>
                        <p>Some description</p>
                        <a href="#" class="info">Read More</a>
                    </div>
                </div>                                                       

                <div class="view stype">
                    <img src="/images/examples/photo/example_2.jpg"/>
                    <div class="mask"></div>
                    <div class="content">
                        <h2>Lorem ipsum dolor</h2>
                        <p>Some description</p>
                        <a href="#" class="info">Read More</a>
                    </div>
                </div>                             

                <div class="view ftype">
                    <img src="/images/examples/photo/example_3.jpg"/>
                    <div class="mask"></div>
                    <div class="content">
                        <h2>Lorem ipsum dolor</h2>
                        <p>Some description</p>
                        <a href="#" class="info">Read More</a>
                    </div>
                </div>                                                       

                <div class="view stype">
                    <img src="/images/examples/photo/example_4.jpg"/>
                    <div class="mask"></div>
                    <div class="content">
                        <h2>Lorem ipsum dolor</h2>
                        <p>Some description</p>
                        <a href="#" class="info">Read More</a>
                    </div>
                </div>                                                     

                <div class="view ftype">
                    <img src="/images/examples/photo/example_5.jpg"/>
                    <div class="mask"></div>
                    <div class="content">
                        <h2>Lorem ipsum dolor</h2>
                        <p>Some description</p>
                        <a href="#" class="info">Read More</a>
                    </div>
                </div>                                                       

                <div class="view stype">
                    <img src="/images/examples/photo/example_6.jpg"/>
                    <div class="mask"></div>
                    <div class="content">
                        <h2>Lorem ipsum dolor</h2>
                        <p>Some description</p>
                        <a href="#" class="info">Read More</a>
                    </div>
                </div>                             

                <div class="view ftype">
                    <img src="/images/examples/photo/example_7.jpg"/>
                    <div class="mask"></div>
                    <div class="content">
                        <h2>Lorem ipsum dolor</h2>
                        <p>Some description</p>
                        <a href="#" class="info">Read More</a>
                    </div>
                </div>                                                       

                <div class="view stype">
                    <img src="/images/examples/photo/example_8.jpg"/>
                    <div class="mask"></div>
                    <div class="content">
                        <h2>Lorem ipsum dolor</h2>
                        <p>Some description</p>
                        <a href="#" class="info">Read More</a>
                    </div>
                </div>                          

            </div>                        

        </div>            
        
        <div class="widget">                
            <div class="head dark">
                <div class="icon"><span class="icos-lab"></span></div>
                <h2>Sortable Gallery</h2>
            </div>
            <div class="toolbar">
                <div class="btn-group" data-toggle="buttons-radio">
                    <button type="button" class="btn btn-primary btn-small active" id="removeFilter">All</button>
                    <button type="button" class="btn btn-primary btn-small" id="filterByCity">City</button>
                    <button type="button" class="btn btn-primary btn-small" id="filterByNature">Nature</button>
                    <button type="button" class="btn btn-primary btn-small" id="filterByCats">Cats</button>
                </div>                    
            </div>
            <div class="sGallery clearfix" id="isotope">
                <div class="item city"><a href="/images/examples/photo/example_1.jpg" class="fb" rel="group"><img src="/images/examples/photo/example_1.jpg" width="220"/></a></div>
                <div class="item nature"><a href="/images/examples/photo/example_2.jpg" class="fb" rel="group"><img src="/images/examples/photo/example_2.jpg" width="220"/></a></div>
                <div class="item nature"><a href="/images/examples/photo/example_3.jpg" class="fb" rel="group"><img src="/images/examples/photo/example_3.jpg" width="220"/></a></div>
                <div class="item nature"><a href="/images/examples/photo/example_4.jpg" class="fb" rel="group"><img src="/images/examples/photo/example_4.jpg" width="220"/></a></div>
                <div class="item city"><a href="/images/examples/photo/example_5.jpg" class="fb" rel="group"><img src="/images/examples/photo/example_5.jpg" width="220"/></a></div>
                <div class="item nature"><a href="/images/examples/photo/example_6.jpg" class="fb" rel="group"><img src="/images/examples/photo/example_6.jpg" width="220"/></a></div>
                <div class="item nature"><a href="/images/examples/photo/example_7.jpg" class="fb" rel="group"><img src="/images/examples/photo/example_7.jpg" width="220"/></a></div>
                <div class="item cat"><a href="/images/examples/photo/example_8.jpg" class="fb" rel="group"><img src="/images/examples/photo/example_8.jpg" width="220"/></a></div>
                <div class="item city"><a href="/images/examples/photo/example_9.jpg" class="fb" rel="group"><img src="/images/examples/photo/example_9.jpg" width="220"/></a></div>
                <div class="item cat"><a href="/images/examples/photo/example_10.jpg" class="fb" rel="group"><img src="/images/examples/photo/example_10.jpg" width="220"/></a></div>
            </div>                                    
            
        </div>
        
    </div>
    
    
</div>  
